<template>
  <div class="login">
    <CommonHeader title="欢迎登录">
      <template #left>
        <div class="back-icon">
          <Icon name="zuojiantou" />
          <span>返回</span>
        </div>
      </template>
    </CommonHeader>
    <!-- logo -->
    <div class="login_logo">
      <img
        src="http://43.138.15.137:8086/static/img/orange.05e0f3f6.png"
        alt="logo"
      />
    </div>
    <!-- form表单 -->
    <div class="login_form">
      <form action="" @submit.prevent>
        <div class="form_item" v-verify="'phone'">
          <label for="">手机号:</label>
          <input
            type="text"
            class="login_input_phone"
            v-model="form.phone"
            placeholder="请输入手机号"
          />
        </div>
        <div class="form_item" v-verify="'password'">
          <label for="">密码:</label>
          <input
            type="password"
            class="login_input_password"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </div>
        <div class="form_item" @click="handleLogin">
          <button>点击登录</button>
        </div>
      </form>
    </div>
    <!-- 底部  未注册?点击注册 -->
    <div class="login_footer">
      <p>
        未注册?
        <span @click="handleRegister">点击注册</span>
      </p>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/common/publicHeader/index.vue';
import Icon from '@/components/common/Icon/index.vue';
import { login } from '@/api/login';
import Message from '@/utils/message';
import toast from '@/utils/toast';

export default {
  components: {
    CommonHeader,
    Icon,
  },
  data() {
    return {
      form: {
        phone: '',
        password: '',
      },
    };
  },
  name: 'login',
  methods: {
    // 点击注册
    handleRegister() {
      this.$router.push({
        name: 'register',
      });
    },
    //登陆请求
    async handleLogin() {
      try {
        // 1. 手机号校验
        if (!this.form.phone) {
          return toast('请输入手机号');
        }
        // 判断手机号格式对吗如果不对不能进行下一步
        if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
          return toast('请输入正确的手机号');
        }

        // 2. 密码校验
        if (!this.form.password) {
          return toast('请输入密码');
        }
        const res = await login(this.form);
        const { list, code, msg } = res;
        if (code !== 200) {
          return toast.error('登录失败手机号或密码错误');
        }
        // 登录成功
        Message.success(msg);
        // 保存本地存储
        localStorage.setItem('userinfo', JSON.stringify(list));
        this.$router.push({
          name: 'home',
        });
      } catch (err) {
        toast.error(err.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login_logo {
  height: 150px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.login_form {
  padding: 20px;

  form {
    .form_item {
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      &:last-child {
        border-bottom: none;
      }

      label {
        display: block;
        width: 80px;
        margin-bottom: 5px;
        font-size: 14px;
      }

      input {
        width: 100%;
        height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
      }

      button {
        width: 100%;
        height: 40px;
        background-color: #ff6140;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 16px;
      }
    }
  }
}

.login_footer {
  padding: 20px;

  p {
    font-size: 14px;
    color: #999;
    text-align: center;

    span {
      color: #ff6140;
    }
  }
}
</style>
